<template>
    <!-- <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
    </div> -->
    <!-- <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="getTIme"
            value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
    </div> -->
    <!-- Tab切换 -->
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户来源" name="0">
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main1" style="width: 1100px;height:450px;"></div>
            <div class="container">
                <div class="float-box">浮动元素</div>
                <div class="content">吸顶元素</div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="页面访问量" name="1">

            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main2" style="width: 1100px;height:450px;"></div>
        </el-tab-pane>
    </el-tabs>
</template>
  
<script>
export default {
    data() {
        return {
            activeName: '0',



            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            value2: ''
        };
    },
    mounted() {
        this.userOrigin()
        // this.handleClick()
    },
    methods: {
        handleClick(tab, event) {
            // console.log(tab.index)
            // tab.index 表示当前标签页为多少，这是一个字符串类型
            if (tab.index === '0') {
                // 发起访问第一个数据报表的请求
                this.userOrigin()
            } else if (tab.index === '1') {
                this.pageAccess()
            }
        },
        userOrigin() {
            console.log(0);

        },
        pageAccess() {
            console.log(1);
        },
        getTIme(key) {
            console.log(JSON.stringify(key));
            console.log(JSON.stringify(this.value2));
        }

    },
};
</script>
<style lang="scss">
.container {
    position: relative;
    /* 相对定位，使子元素可以相对于它进行定位 */
}

.float-box {
    float: left;
    /* 浮动元素 */
    width: 200px;
    height: 100px;
    background-color: #f00;
}

.content {
    position: sticky;
    /* 吸顶元素 */
    top: 0;
    z-index: 1;
    /* 层级比浮动元素高 */
    background-color: #0f0;
}
</style>